<template>
  <BasicModal v-bind="$attrs" @register="detailsModal" width="50%" height="80%" @cancel='handCancel'>
    <a-tabs defaultActiveKey="base-info" v-model:activeKey="activeKey" @tab-click="handleTabClick">
      <a-tab-pane tab="产品信息" key="product-info" forceRender style="position: relative">
        <div style="padding: 0 20px">
          <a-form :model="orderMainModel" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-row :gutter="20">
              <a-col :span="12">
                <a-form-item label="产品编号" name="productId">
                  <a-input v-model:value='orderMainModel.productId' disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="产品名称" name="productName">
                  <a-input v-model:value='orderMainModel.productName' disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="产品分类" name="categoryName">
                  <a-input v-model:value='orderMainModel.categoryName' disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="接入方式" name="accessName">
                  <a-input v-model:value='orderMainModel.accessName' disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="产品说明" name="productRemark">
                  <a-input v-model:value='orderMainModel.productRemark' disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="创建时间" name="createTime">
                  <a-input v-model:value='orderMainModel.createTime' disabled />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane tab="产品模型" key="mode-info">
        <DepartRoleInfoTab v-if="activeKey == 'mode-info'" :isShow="isShow" :productId="orderMainModel.productId" />
      </a-tab-pane>
    </a-tabs>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, computed, unref, reactive } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { formSchema } from '../ProductCategory.data';
  import { saveOrUpdate } from '../ProductCategory.api';
  import DepartRoleInfoTab from '../../device/ModelInfoList.vue';
  const form = {}

  // Emits声明
  const emit = defineEmits(['register', 'success']);
  const isUpdate = ref(true);

  // form表单 col
  const labelCol = { span: 4 };
  const wrapperCol = { span: 20 };
  const activeKey = ref('product-info');
  const orderMainModel = reactive({
    id: null,
    productName: '',
  });
  const isShow = true;
  const [detailsModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
    isUpdate.value = !!data?.isUpdate;
    if (unref(isUpdate)) {
      // rowId.value = data.record.id;
      Object.assign(orderMainModel, data.record);
      //object.assign(dataSource)

    }
  })

  async function handleSubmit(v) {
    // try {
    //   let values = await validate();
    //   setModalProps({ confirmLoading: true });
    //   //提交表单
    //   await saveOrUpdate(values, isUpdate.value);
    //   //关闭弹窗
    //   closeModal();
    //   //刷新列表
    //   emit('success', { isUpdate: isUpdate.value, values });
    // } finally {
    //   setModalProps({ confirmLoading: false });
    // }
  }
  async function handleTabClick(key) {
    console.log(key)
    activeKey.value = key;
    //this.currentTab = key; // 更新当前激活的Tab
  }
  async function handCancel(v) {
    activeKey.value = 'product-info';
  }
</script>

<style lang="less">
</style>
